import * as React from "react"
import { useParams, Link } from "react-router-dom"
import {
  Table,
  Form,
  Button,
  Menu,
  Dropdown,
  Breadcrumb
} from "antd"
import { SettingOutlined, PlusOutlined } from "@ant-design/icons"
import { ColumnProps } from "antd/lib/table"
import style from "./style.module.css"
import { SkuStatus, IUser, UserSex } from "../../types"
import Edit from "../UserEdit/Edit"
import { toFontSex, toFontStatus } from "../../pages/util"

interface Params {
  id: string
}

interface Props {
  data: IUser[]
  companyShortName?: string
  delete: (id: string) => void
  setStatus: (id: string) => void
  getData: () => void
}

export default function User(prop: Props) {
  const len: number | undefined = prop.companyShortName?.length
  const companyShortName: string | undefined = prop.companyShortName
  const data: IUser[] = prop.data
  const [visible, setVisible] = React.useState<boolean>(false)
  const id = useParams<Params>().id
  const columns: ColumnProps<IUser>[] = [
    {
      title: '头像',
      dataIndex: 'avatar',
      width: 150,
      align: 'center',
      render: value => <img src={value} width="120" alt='' />
    },
    {
      title: '用户名',
      dataIndex: 'username'
    },
    {
      title: '用户昵称',
      dataIndex: 'name'
    },
    {
      title: '用户性别',
      dataIndex: 'sex',
      render: (value: UserSex) => {
        return toFontSex(value)
      }
    },
    {
      title: '用户状态',
      dataIndex: 'isDisabled',
      render: (value: SkuStatus) => {
        return toFontStatus(value)
      }
    },
    {
      title: '操作',
      key: 'opt',
      width: 150,
      align: 'center',
      render: (val, record) => {
        return (
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item key="delete" onClick={() => {
                  prop.delete(record._id)
                  prop.getData()
                }
                }>
                  删除成员
                </Menu.Item>
                {len === undefined && <Menu.Item key="stop" onClick={() => {
                  prop.setStatus(record._id)
                  prop.getData()
                }}>
                  更改用户状态
                </Menu.Item>}
              </Menu>
            }
          >
            <Button icon={<SettingOutlined />} />
          </Dropdown>
        )
      }
    }
  ]
  return (
    <>
      {len !== undefined && <Form layout="inline" className={style.toolbar}>
        <Form.Item>
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/home/company'>我的企业</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{`${companyShortName}公司成员信息`}</Breadcrumb.Item>
          </Breadcrumb>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => {
              setVisible(!visible)
            }}
            icon={<PlusOutlined />}
          >
            添加用户
          </Button>
        </Form.Item>
      </Form>}
      <Table
        dataSource={data}
        rowKey="_id"
        columns={columns}
      />
      {visible && (
        <Edit
          getData={prop.getData}
          id={id}
          afterClose={() => {
            setVisible(false)
          }}
        />
      )}
    </>
  )
}
